<template>
  <el-card>
    <!-- 1.0 标题 -->
    <template #header>
      <h1>商品列表</h1>
    </template>
    <!-- 2.0 内容 -->
    <el-table :data="tableData" style="width: 100%" size="mini">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品分类：">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属分类：">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="商品价格：">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="商品图片：">
              <template v-slot="{ row }">
                <img :src="ImageUrl + row.imgUrl" />
              </template>
            </el-form-item>
            <el-form-item label="商品描述：">
              <span>{{ props.row.goodsDesc }}</span>
            </el-form-item>
            <el-form-item label="商品评价：">
              <span>{{ props.row.rating }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="所属分类" prop="category"> </el-table-column>
      <el-table-column label="商品价格" prop="price"> </el-table-column>
      <el-table-column label="商品图片" prop="imgUrl">
        <template v-slot="{ row }">
          <img :src="ImageUrl + row.imgUrl" />
        </template>
      </el-table-column>
      <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button size="mini" @click="handleEdit(row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 3.0 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 3, 4, 7]"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 弹窗 -->
    <el-dialog title="编辑商品" :visible.sync="dialogVisible" width="70%">
      <!-- 弹窗内容 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="category">
          <el-select v-model="ruleForm.category" placeholder="请选择">
            <el-option label="撸烤串" value="撸烤串"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品图片地址" prop="imgUrl">
          <el-input v-model="ruleForm.imgUrl"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="goodsDesc">
          <el-input type="textarea" v-model="ruleForm.goodsDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btn">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { listgoods, goodsDel, goodsedit } from '../../api/goods'
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 3,
      total: 0,
      tableData: [],
      dialogVisible: false,
      ruleForm: {
        name: '',
        category: '',
        price: '',
        imgUrl: '',
        goodsDesc: ''
      },
      id: '',
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        category: [{ required: true, message: '请输入', trigger: 'change' }],
        price: [{ required: true, message: '请输入', trigger: 'blur' }],
        imgUrl: [{ required: true, message: '请输入', trigger: 'change' }],
        goodsDesc: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      ImageUrl: 'http://127.0.0.1:5000/upload/imgs/goods_img/'
    }
  },
  created() {
    this.list()
  },
  methods: {
    /* 渲染列表 */
    async list() {
      const { data, total } = await listgoods({
        currentPage: parseInt(this.currentPage),
        pageSize: parseInt(this.pageSize)
      })
      this.total = total
      this.tableData = data
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.list()
    },
    /* 删除当前行 */
    async handleDelete(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (code === 0) {
            this.list()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      const { code, msg } = await goodsDel({
        id: parseInt(row.id)
      })
    },
    /* 编辑数据 */
    handleEdit(row) {
      this.dialogVisible = true
      this.ruleForm.name = row.name
      this.ruleForm.category = row.category
      this.ruleForm.price = row.price
      this.ruleForm.imgUrl = row.imgUrl
      this.ruleForm.goodsDesc = row.goodsDesc
      this.id = row.id
    },
    /* 确定编辑 */
    async btn() {
      this.dialogVisible = false
      const { code, msg } = await goodsedit({
        name: this.ruleForm.name,
        category: this.ruleForm.category,
        price: this.ruleForm.price,
        imgUrl: this.ruleForm.imgUrl,
        goodsDesc: this.ruleForm.goodsDesc,
        id: this.id
      })
      if (code === 0) {
        this.list()
      }
    }
  },
  total() {
    if (
      this.total === (this.currentPage - 1) * this.pageSize &&
      this.total !== 0
    ) {
      this.currentPage -= 1
      this.list()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-pagination {
  padding: 10px 0;
}
img {
  width: 30px;
}
/deep/.el-form-item {
  display: block;
  padding: 0;
  margin: 0;
}
/deep/.el-table .cell {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
